<!--
  功能：确认方向
  作者：licy
  邮箱：licy@briup.com
  时间：2020年12月03日 16:12:32
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class='direction_list'>
    <div class="page_info">
      您当前状态: <el-tag> {{user.student.status}}</el-tag>
      <p v-if="user.student.status !== '待选方向'">
        您的方向: <span style="color:red">{{user.student.direction}}</span> 
      </p>
    </div>
    <div class="directions">
      <ul>
        <li class="direction" v-for="d in directionData.list" :key="d.id" @click.stop="toShowDetailsHandler(d)">
          <div class="photo">
            <img src="@/assets/mt/smart.jpg" alt="" v-if="!d.photo">
            <img v-else :src="d.photo" alt="">
          </div>
          <div class="right">
            <div class="title">{{d.name}}</div>
            <div class="brief">{{d.introduce}}</div>
            <div class="price">
              ￥ {{d.price}}
            </div>
            <div class="others">
              <div class="recommand">
                推荐指数 <span style="color:red"> {{d.level}}</span>
              </div>
              <div class="salary">
                第一年薪资水平  <span style="color:red">{{d.salary}}</span>
              </div>
            </div>
          </div>
          <div class="option">
            <div><el-button :disabled="user.student.status ==  '学习中'" type="primary" size="mini" round @click.stop="toSubscribeHandler(d)" >预选</el-button></div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 分页 -->
   <div class="page">
      <el-pagination background 
        layout="prev, pager, next,sizes" 
        small
        :total="directionData.total" 
        :page-size="directionData.pageSize" 
        :current-page="directionData.page"
        :page-sizes="[5, 10, 15, 20]"
        @current-change="currentChangeHandler">
      </el-pagination>
   </div>
    <!-- 分页 -->

    <!-- 模态框 -->
    <el-dialog title="方向介绍" :visible.sync="visible" width="80%" class="customer_modal">
      <div v-html="form.details"></div>
    </el-dialog>
  </div>
</template>

<script>
import {get,post,postJSON} from '@/utils/request'
import _ from 'lodash'
import { mapGetters ,mapActions} from 'vuex'
export default {
  // 组件名称
  name: 'demo',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
   return {
    visible:false,
    loading:false,
    title:"",
    param:{
      page:1,
      pageSize:5
    },
    form:{},
    directionData:{
      list:[]
    },
   }
  },
  // 计算属性
  computed: {
    ...mapGetters(['user'])
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    ...mapActions('user',['getInfo']),
    // 预约
    toSubscribeHandler(row){
      this.$confirm('是否选定 《'+row.name+'》 方向?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = '/student/batchConfirmDirection'
        let data = {
          directionId:row.id,
          ids:[this.user.student.id]
        }
        postJSON(url,data).then(response => {
          this.$message({ message: response.message, type: 'success' })
          this.getInfo();
        });
      })
    },
    // 去查看方向详情
    toShowDetailsHandler(row){
      // 将当前行数据的克隆对象赋值给当前form,这样可以避免修改表单数据导致表格数据发生变化。
      this.form = _.clone(row);
      // 显示抽屉
      this.visible = true;
    },
    // 查询方向信息
    loadDirections(){
      // 添加loading,页面加载开始
      this.loading = true;
      let url = "/direction/pageQuery"
      get(url,this.param).then(response => {
        this.directionData = response.data;
        // 页面加载结束
        this.loading = false;
      })
    },
    // 当前页发生改变
    currentChangeHandler(page){
      this.param.page = page;
      this.loadDirections();
    },
  },
  // 以下是生命周期钩子
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    // 加载方向信息
    this.loadDirections();
  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted () {
  },
  /**
  * 实例销毁之前调用。在这一步，实例仍然完全可用。
  */
  beforeDestroy () {
  },
  /**
  * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
  * 所有的事件监听器会被移除，所有的子实例也会被销毁。
  */
  destroyed () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped lang="scss">
.direction_list {
  color: #666;
  font-size: 14px;
  
  .directions {
    .direction:hover {
      background-color: #fffcf2;
    }
    .direction {
      display: flex;
      cursor: pointer;
      flex-direction: row;
      padding:1em 0;
      border-bottom: 1px solid #efefef;
      position: relative;
      .photo {
        flex-basis: 200px;
        height: 120px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .right {
        flex:1;
        padding:0 1em;
        .title {
          font-weight: bold;
          line-height: 2em;
        }
        .brief {
          font-size: 12px;
        }
        .others {
          display: flex;
          position: absolute;
          bottom: 2em;
          font-size: 12px;
          & > div {
            margin-right: 1em;
          }
        }
      }
      .option {
        border-left:1px solid #efefef;
        flex-basis: 100px;
        padding-top: 40px;
        text-align: center;
      }
    }
  }
}
</style>

